<template>
    <div>
        <!-- 卡片区域 -->
        <div class="card">
            <h5 class="card-header">添加学生信息</h5>
            <div class="card-body">
                <!-- 添加学生的表单 -->
                <form class="form-inline">
                    <div class="input-group mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">学生姓名</div>
                        </div>
                        <!-- 文本输入框 -->
                        <input type="text" class="form-control" v-model="addlist.sname" />
                    </div>

                    <div class="input-group mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">学生专业</div>
                        </div>
                        <!-- 下拉菜单 -->
                        <select class="form-control" v-model="addlist.sclass">
                            <option value="-请选择专业-">-请选择专业-</option>
                            <option value="移动应用开发">移动应用开发</option>
                            <option value="软件开发">软件开发</option>
                            <option value="计算机网络">计算机网络</option>
                            <option value="数字媒体">数字媒体</option>
                            <option value="信息安全管理">信息安全管理</option>
                        </select>
                    </div>

                    <div class="input-group mb-2 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">入校日期</div>
                        </div>
                        <!-- 选择框 -->
                        <input type="date" class="form-control" v-model="addlist.sdate" />
                    </div>

                    <!-- 提交表单的按钮 -->
                    <button type="button" class="btn btn-primary mb-2" @click="addNewStudent">添加学生信息</button>
                </form>
            </div>
        </div>

        <!-- 品牌列表 -->
        <table class="table table-bordered table-striped mt-2">
            <thead>
                <tr>
                    <th>#</th>
                    <th>学生姓名</th>
                    <th>学生专业</th>
                    <th>入校日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 表格的主体区域 -->
            <tbody>
                <!-- TODO：循环渲染表格的每一行数据 -->
                <tr v-for="item in slist" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.major }}</td>
                    <td>{{ item.adminssionDate }}</td>
                    <td>
                        <el-button text @click="open(item.id)">修改</el-button>
                        <el-button text @click="deletebtn(item.id)">删除</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <dialogComponent v-model:visible="flag" :altlist="altstu"></dialogComponent>
    </div>
</template>

<script>
import dialogComponent from './dialogComponent.vue'
import request from '../utils/request.js'
import { ref, watch, nextTick } from "vue";

export default {
    name: 'MyStudentInfo',
    data() {
        return {
            flag: false,
            istrue: true,
            //添加学生信息
            addlist: {
                sname: '',//学生姓名
                sclass: '-请选择专业-',//学生专业
                sdate: '',//入校日期
            },
            //弹窗组件初始化学生信息
            altstu: {
                initid: '',//学生id
                initname: '',//学生姓名
                initclass: '',//学生专业
                initdate: '',//入校日期
            }
        }
    },
    props: {
        slist: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    //子传父
    emits: ['addlist'],
    methods: {
        //添加学生
        addNewStudent() {
            //输入框不为空
            if (this.addlist.sname !== null
                && this.addlist.sclass !== '-请选择专业-'
                && this.addlist.sclass !== null
                && this.addlist.sdate !== null) {
                for (let i = 0; i < this.slist.length; i++) {
                    //没有重复的名字
                    if (this.slist[i].name !== this.addlist.sname) {

                    } else {
                        return alert('学生姓名不能重复')
                    }
                }
                this.$emit('addlist', {
                    name: this.addlist.sname,
                    major: this.addlist.sclass,
                    adminssionDate: this.addlist.sdate
                })
                return alert('数据添加成功!请刷新页面')
            } else {
                return alert('请将信息填写完整')
            }
        },
        //编辑对话框
        open(id) {
            // console.log('点击了' + id + '行');
            //将对应的行数据数组初始化到子组件中
            for (let i = 0; i < this.slist.length; i++) {
                if (this.slist[i].id === id) {
                    this.altstu.initid = id
                    this.altstu.initname = this.slist[i].name
                    this.altstu.initclass = this.slist[i].major
                    this.altstu.initdate = this.slist[i].adminssionDate
                }
            }
            this.flag = true
        },
        //删除学生
        async deletebtn(id) {
            const { data: res } = await request.delete('/del/' + id);
            alert(res)
            window.location.reload();
        }
    },
    components: {
        dialogComponent
    }
}
</script>
<style lang="less" scoped>
body {
    padding: 8px;
}
</style>
  